<template>
  <div class="home-body">
        <div class="body-slides">
          <v-carousel
              :height=870
              hide-delimiter-background
              delimiter-icon="mdi-checkbox-blank-circle"
              :show-arrows="false"
              cycle :interval="2000"
              continuous
          >
            <v-carousel-item
                v-for="slide in slides"
            >
              <img style="background-color: #A9C7FF" height="100%" width="100%" :src="slide">
            </v-carousel-item>
          </v-carousel>
        </div>
        <div class="body-course-stu">
          <CourseCards title="最近直播" titlecolor="#075CBA">
            <template #more>更多 ></template>
            <template #course-card>
              <CourseCard v-for="zhibo in zhibos"
              :course="zhibo"
              ></CourseCard>
            </template>
          </CourseCards>
        </div>
        <div class="body-course-stu" id="StuHotCourses">
          <CourseCards title="热门课程" titlecolor="#075CBA" >
            <template #more><div @click="moreCourses">更多 ></div></template>
            <template #course-card>
              <CourseCard v-for="course in courses"
                          :course="course"
              ></CourseCard>
            </template>
          </CourseCards>
        </div>
  </div>
</template>
<script>
import CourseCards from "@/components/layout/CourseCards";
import CourseCard from "@/components/CourseCard";
export default {
  name:'StuHome',
  components:{CourseCards,CourseCard},
  data(){
    return{
      slides: [
        require('@/static/slide1.png'),
        require('@/static/homeImg1.png'),
        require('@/static/homeImg2.png'),
        require('@/static/homeImg3.png'),
      ],
      zhibos:[
        {
          img:require('@/static/courseImg1.png'),
          title:'孙中山先生简介及讲话',
          t:'2022年3月15日  15:00',
          info:'讲述了孙中山先生的基本事迹，并附有先生的实况讲话。',
          avatar:require('@/static/avatar2.png'),
          team:'历史宣传小组',
        },
        {
          img:require('@/static/courseImg2.png'),
          title:'我有一双明亮的眼睛',
          t:'2022年3月15日  16:00',
          info:'中国是近视眼发病率最高的国家之一，随着可以负担的加重，近视度数逐渐增加......',
          avatar:require('@/static/avatar.png'),
          team:'育暖航行支教队',
        },
        {
          img:require('@/static/courseImg3.png'),
          title:'熬夜知识知多少',
          t:'2022年3月15日  18:00',
          info:'你有没有过熬夜的经历呢？你了解熬夜带来的身体损害有哪些吗？让我们一起去学习一下吧！',
          avatar:require('@/static/avatar.png'),
          team:'育暖航行支教队',
        },
        {
          img:require('@/static/courseImg4.png'),
          title:'计算机发展历程',
          t:'2022年3月15日  20:00',
          info:'如今是第四次工业革命——计算机成为世界发展的必备设备，我们身边的......',
          avatar:require('@/static/avatar.png'),
          team:'育暖航行支教队',
        },
      ],
      courses:[
        {
          img:require('@/static/courseImg5.png'),
          title:'航空知识科普',
          t:'航空航天',
          info:'让我们一起仰望蓝天！',
          avatar:require('@/static/avatar3.png'),
          team:'蓝天之梯支教团',
        },
        {
          img:require('@/static/courseImg2.png'),
          title:'我有一双明亮的眼睛',
          t:'健康',
          info:'中国是近视眼发病率最高的国家之一，随着可以负担的加重，近视度数逐渐增加......',
          avatar:require('@/static/avatar.png'),
          team:'育暖航行支教队',
        },
        {
          img:require('@/static/courseImg3.png'),
          title:'熬夜知识知多少',
          t:'计算机',
          info:'你有没有过熬夜的经历呢？你了解熬夜带来的身体损害有哪些吗？让我们一起去学习一下吧！',
          avatar:require('@/static/avatar.png'),
          team:'育暖航行支教队',
        },
        {
          img:require('@/static/courseImg4.png'),
          title:'计算机发展历程',
          t:'科学',
          info:'如今是第四次工业革命——计算机成为世界发展的必备设备，我们身边的......',
          avatar:require('@/static/avatar.png'),
          team:'育暖航行支教队',
        },
      ]
    }
  },
  methods:{
    moreCourses(){
      this.$emit('gotoStuCourses');
    },
  }

}
</script>

<style scoped>
.home-body{
  width: 1728px;
  position: relative;
}

.body-slides{
  width: 1728px;
  height: 870px;
  position: relative;
}
.body-course-stu{
  margin-top:116px;
  margin-bottom: 200px;
}
</style>